<template>
	<jn-page bgColor="#ffa600">
		<view class="">
			<view class="banner">
				<u-image src="https://wmsq.oss-cn-hangzhou.aliyuncs.com/hd001.jpg" width="100%" mode="widthFix"></u-image>
				<view class="jnbtn">
					<view class="" style="margin:0 100rpx">
						<u-button :hair-line="false" shape="circle" open-type="share" :custom-style="customStyle">立即邀请</u-button>
						<u-button :hair-line="false" shape="circle" :custom-style="customStyle" @click="getweapp">面对面扫码</u-button>
					</view>
				</view>
			</view>
			
			<view class="banner1">
				<u-image src="/static/revenue/banner1.jpg" width="100%" mode="widthFix"></u-image>
				<view class="box">
					<view class="t-box">
						<view class="box-item">
							<view class="box-box">
								<view class="box-p">
									{{userdata.total_money}}
									<text class="t-text">元</text>
								</view>
								<view class="box-t">
									<text>累计收益</text>
								</view>
							</view>
						</view>
						<view class="box-item">
							<view class="box-box">
								<view class="box-p">
									{{userdata.child_child_user_count}}
									<text class="t-text">人</text>
								</view>
								<view class="box-t">
									<text>成功邀请</text>
								</view>
							</view>
						</view>
					</view>
					<view class="b-box">
						<u-button :hair-line="false" shape="circle" open-type="share" :custom-style="customStyles">立即分享天天惠领券给好友赚奖励金</u-button>
					</view>
				</view>
			</view>
			<view class="banner2">
				<u-image src="https://wmsq.oss-cn-hangzhou.aliyuncs.com/hd004.jpg" width="100%" mode="widthFix"></u-image>
			</view>
		</view>
		<u-modal v-model="show" :show-title="false" :mask-close-able="true" :show-confirm-button="false" :title-style="{color: 'red'}" >
			<view class="slot-content">
				<u-image :src="weappimageUrl" width="100%" mode="widthFix"></u-image>
				<view class="" style="margin-top:30rpx;text-align: center;font-size: 28rpx;">
					<text>让朋友打开微信扫一扫上面的二维码邀请他（她）加入</text>
				</view>
			</view>
		</u-modal>
	</jn-page>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				weappimageUrl:'',
				userdata:[],
				customStyle:{
					backgroundImage:'linear-gradient(#fbf3bd, #fcc169)',
					border:'none',
					boxShadow: 'rgb(0 0 0 / .3) 0px 1px 5px 1px',
					marginBottom:'30rpx',
					color:'red',
					fontWeight:'600'
				},
				customStyles:{
					backgroundImage:'linear-gradient(#fb0400, #fe0104)',
					border:'none',
					boxShadow: 'rgb(0 0 0 / .3) 0px 1px 5px 1px',
					marginBottom:'30rpx',
					color:'#ffffff',
					fontWeight:'600'
				},
			}
		},
		onShareAppMessage: function(res) {
			if (res.from === 'button') {// 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '美团，饿了么，单单帮你省',
				path: '/pages/index/index?fromid='+this.vuex_user.userId,
				imageUrl:'https://wm.ab2c.cn/sldier/slider2.png'
			}
		},
		onLoad() {
		},
		onShow() {
			this.getuserdata();
		},
		methods: {
			getweapp(){
				// this.$u.post('/wxapi/api/getacode', {
				// 	token: this.vuex_token.accessToken
				// })
				// .then(res => {
				// 	this.show = true;
				// 	if (res.code == 200) {
				// 		this.weappimageUrl = res.data
				// 		console.log(res)
				// 	}
				// });
				uni.navigateTo({
					url:'poster'
				})
			},
			getuserdata() {
				this.$u.post('/wxapi/api/getuserdata', {
					token: this.vuex_token.accessToken,
					//serinfo:this.vuex_user.userinfo
				}).then(res => {
					console.log(res);
					if (res.code == 200) {
						this.userdata = res.data;
					} else if (res.code == 999) {
						this.$u.toast('登陆操时');
					}
					return false;
				});
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	
	.banner {
		position: relative;
		.jnbtn {
			position: absolute;
			bottom: 100rpx;
			width: 100%;
			// left: 50%;
			// transform: translateX(-50%);
			.abtn{
				width: 100%;
				height: 120rpx;
				background-image: url();
				background-repeat: no-repeat;
				background-size: contain;
				background-position: center;
				display: flex;
				justify-content: center;
				align-items: center;
				color: red;
				font-weight: 600;
			}
		}
	}
	
	.banner1 {
		position: relative;
		.box {
			width: 100%;
			position: absolute;
			top: 180rpx;
			.t-box {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				margin: 0 40rpx;
				.box-item{
					width: calc(100%/12 * 6);
					flex: 0 0 50%;
					align-items: center;
					justify-content: flex-start;
					padding: 0px 4px;
					.box-box {
						display: flex;
						flex-direction: column;
						background-color: #f2f2f2;
						border-radius: 15rpx;
						text-align: center;
						padding: 15px 0;
						height: 100%;
						.box-p {
							color: red;
							font-size: 100rpx;
							word-break: break-all;
							.t-text {
								font-size: 36rpx;
							}
						}
						.box-t {
							padding-top: 15rpx;
							padding-bottom: 30rpx;
						}
					}
				}
			}
			.b-box{
				display: flex;
				justify-content: center;
				margin-top: 100rpx;
			}
		}
	}
	
	.slot-content {
		margin: 50rpx;
	}
	
</style>
